<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="1180px"
      height="84%"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card style="height:500px">
            <el-form
              size="mini"
              ref="form"
              :model="form"
              :rules="rules"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <el-input
                      placeholder="输入关键字进行过滤"
                      v-model="filterText">
                    </el-input>
                    <!--在 ：data="data2"下面还有  :props="defaultProps" -->
                    <el-tree
                      class="filter-tree"
                      :data="data2"
                     
                      default-expand-all
                      :filter-node-method="filterNode"
                      ref="tree2">
                    </el-tree>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div style="width:1150px;height:500px;background:url(../../../../../static/images/image/logo.png)">
                    <agent-panel :data="panelData"    ></agent-panel>
                  </div>
                  <!-- <img src="../../../../../static/images/image/logo.png"> -->
                  
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request1 from "@/common/utils/requestTest";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import agentPanel from "@/components/agentPanel";

export default {
  name: '',
  components: {
    agentPanel
  },
  data() {
    return {
      radio: "",
      loading: false,
      filterText: '',
      data2: [{
        id: 1,
        label: '13楼 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      panelData:[
        {agentId:'ZT001',agentName:'张飞',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'WG001',agentName:'曹操',agentStatus:'0',agentCompany:'WG'},
        {agentId:'ZT002',agentName:'刘备',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT003',agentName:'关羽',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT004',agentName:'关羽1',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT005',agentName:'关羽2',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT006',agentName:'关羽3',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT007',agentName:'关羽4',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT008',agentName:'关羽5',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT009',agentName:'关羽6',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT010',agentName:'关羽7',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT011',agentName:'关羽8',agentStatus:'1',agentCompany:'ZT'},
        {agentId:'ZT012',agentName:'关羽9',agentStatus:'1',agentCompany:'ZT'},
        // {agentId:'ZT013',agentName:'关羽10',agentStatus:'1',agentCompany:'ZT'},

      ],
      form: {

      },
        
      rules: {
      }
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleCurrentChange(row, event, column){
      console.log(row,event,column,event.currentTarget);
    },
    handleEdit(index,row){
      console.log(index,row);
    },
    handleDelete(index,row){
      console.log(index,row);
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    },
    openCreate(){

    }
  }
};
</script>
<style lang="scss" scoped>


